<template>
    <div>
        <Row>
            <Col span="18">
                <Card>
                    <Row class="margin-top-10">
                        <Form ref="formSearch" :model="formSearch" inline>
                            <FormItem>
                                <Input v-model="formSearch.name" placeholder="名称"></Input>
                            </FormItem>
                            <FormItem>
                                <Button type="primary" @click="handleSubmit('formSearch')">搜索</Button>
                            </FormItem>
                        </Form>
                    </Row>
                    <Row class="margin-top-10">
                        <Button type="success" @click="modal = true" icon="plus-round">添加</Button>
                    </Row>
                    <Row class="margin-top-10">
                        <Table border :loading="loading" :columns="columns" :data="data"></Table>
                    </Row>
                    <Row class="margin-top-10">
                        <Page :total="page.total" :page-size="page.page_size" size="small" @on-change="pageOnChange" show-elevator show-total></Page>
                    </Row>
                </Card>
            </Col>
        </Row>
        <Modal v-model="modal" title="添加分类" :loading="modal_loading" @on-ok="modal_ok" ref="modal_add" @keydown.enter.native="modal_ok">
            <Form :model="formItem" :label-width="50">
                <FormItem label="名称">
                    <Input v-model="formItem.name"></Input>
                </FormItem>
            </Form>
        </Modal>
        <Modal v-model="modal_edit" title="编辑分类" :loading="modal_edit_loading" @on-ok="modal_edit_ok" ref="modal_edit">
            <Form :model="formItem_edit" :label-width="50">
                <FormItem label="名称">
                    <Input v-model="formItem_edit.name"></Input>
                </FormItem>
            </Form>
        </Modal>
    </div>
</template>

<script>
    import '../../../styles/common.less';
    import '../../../styles/table.less';
    import {GET_OK, POST_OK, PUT_OK, DELETE_OK, PAGE_SIZE} from '@/libs/config';
    import parseUrl from '@/libs/parseUrl';
    export default {
        name: 'admin-web-category',
        data () {
            return {
                modal: false,
                modal_edit: false,
                query: '',
                loading: true,
                modal_loading: true,
                modal_edit_loading: true,
                columns: [
                    {
                        type: 'selection',
                        width: 60,
                        align: 'center'
                    },
                    {
                        title: '序号',
                        key: 'id',
                        align: 'center'
                    },
                    {
                        title: '名称',
                        key: 'name',
                        align: 'center'
                    },
                    {
                        title: 'EN',
                        key: 'slug',
                        align: 'center'
                    },
                    {
                        title: '操作',
                        key: 'action',
                        width: 250,
                        align: 'center',
                        render: (h, params) => {
                            return h('div', [
                                h('Button', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        click: () => {
                                            this.getRowData(params.index);
                                            this.modal_edit = true;
                                        }
                                    }
                                }, '编辑'),
                                h('Button', {
                                    props: {
                                        type: 'error',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        click: () => {
                                            this.$Modal.confirm({
                                                title: '提示',
                                                content: '确定删除该信息？',
                                                onOk: () => {
                                                    this.delRowData(params.row.id);
                                                }
                                            });
                                        }
                                    }
                                }, '删除')
                            ]);
                        }
                    }
                ],
                data: [],
                page: {
                    total: 0,
                    page_size: PAGE_SIZE,
                    currentPage: 1
                },
                formItem: {
                    name: ''
                },
                formItem_edit: {
                    id: '',
                    name: ''
                },
                formSearch: {
                    name: ''
                }
            };
        },
        mounted () {
            this.getColumnsData();
        },
        methods: {
            getColumnsData (page) {
                this.loading = true;
                let query = this.query;
                let url = parseUrl.parse('web-category', page, query);
                this.$http.get(url).then(res => {
                    if (res.data.code === GET_OK) {
                        this.data = res.data.data;
                        this.page.total = res.data.meta.total;
                    }
                }).catch().finally(() => {
                    this.loading = false;
                });
            },
            getRowData (index) {
                let rowData = this.data[index];
                this.formItem_edit.id = rowData.id;
                this.formItem_edit.name = rowData.name;
            },
            delRowData (id) {
                let url = `/web-category/${id}`;
                this.$http.delete(url).then(res => {
                    if (res.data.code === DELETE_OK) {
                        this.$Notice.success({
                            title: '删除成功'
                        });
                        this.getColumnsData();
                    }
                });
            },
            modal_ok () {
                let formData = {
                    name: this.formItem.name
                };
                this.$http.post('/web-category', formData).then(res => {
                    if (res.data.code === POST_OK) {
                        this.getColumnsData();
                        this.$Notice.success({
                            title: '创建成功'
                        });
                        this.modal_loading = false;
                    }
                    this.$nextTick(() => {
                        this.modal = false;
                        this.modal_loading = true;
                    });
                }).catch().finally();
            },
            modal_edit_ok () {
                let [id, name] = [this.formItem_edit.id, this.formItem_edit.name];
                let url = `/web-category/${id}`;
                let formData = {
                    name: name
                };
                this.$http.put(url, formData).then(res => {
                    if (res.data.code === PUT_OK) {
                        this.getColumnsData(this.page.currentPage);
                        this.$Notice.success({
                            title: '修改成功'
                        });
                        this.modal_edit_loading = false;
                    }
                    this.$nextTick(() => {
                        this.modal_edit = false;
                        this.modal_edit_loading = true;
                    });
                }).catch();
            },
            pageOnChange (page) {
                this.getColumnsData(page);
                this.page.currentPage = page;
            },
            handleSubmit (name) {
                const f = this.formSearch;
                let params = '';
                if (f.name !== '') {
                    params += `search=${f.name}&`;
                }
                this.query = params;
                this.getColumnsData();
            }
        }
    };
</script>

<style scoped>

</style>
